<template>
  <div class="app-container">
    <el-form :rules="rules" label-width="100px" class="demo-ruleForm">
      <el-form-item label="讲师名称">
        <el-input v-model="teacher.name"></el-input>
      </el-form-item>
      <el-form-item label="讲师头衔">
        <el-select v-model="teacher.level" placeholder="请选择讲师头衔">
          <el-option label="高级讲师" value="1"></el-option>
          <el-option label="首席讲师" value="2"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="讲师头像">
        <el-avatar shape="square" :size="100" :src="teacher.avatar"></el-avatar>
          <el-upload
             ref="upload"
            class="avatar-uploader"
            action="http://localhost:9001/eduoss/fileoss"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
      </el-form-item>
      <el-form-item label="讲师资历">
        <el-input v-model="teacher.career"></el-input>
      </el-form-item>
      <el-form-item label="讲师简介">
        <el-input type="textarea" v-model="teacher.intro" :rows="9"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="saveorUpdate()">立即创建</el-button>
        <el-button @click="resetForm()">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
  import teacherApi from '@/api/edu/teacher'
  export default {
    data() {
      return {
       imageUrl: '',
        teacher: {
          name: '',
          level: '',
          career: '',
          intro: '',
          avatar: ''
        }
      }
    },
    created() {
      //判断路径中是否友id值
      if (this.$route.params && this.$route.params.id) {
        const id = this.$route.params.id
        this.getInfo(id)
      }
    },
    methods: {
      saveorUpdate() {
        if (this.$route.params && this.$route.params.id) {
          const id = this.$route.params.id
          this.updateteacherf()
        } else {
          this.saveteacher()
        }
      },
      resetForm() {
        this.teacher = {}
      },
      //添加讲师的方法
      saveteacher() {
        teacherApi.addTeacher(this.teacher)
          .then(response => {
            this.$message({
              type: 'success',
              message: '添加讲师成功!'
            });
            //路由跳转
            this.$router.push({
              path: '/teacher/table'
            })
          })
      },
      getInfo(id) {
        teacherApi.getTeacherInfo(id)
          .then(response => {
            this.teacher = response.data.teacher
            console.log(this.teacher)
          })
      },
      updateteacherf() {
        teacherApi.updateTeacherinfo(this.teacher)
          .then(response => {
            this.$message({
              type: 'success',
              message: '修改讲师成功'
            });
            this.$router.push({
              path: '/teacher/table'
            })
          })
      },
       handleAvatarSuccess(res, file) {
              // this.$refs.upload.submit();
              this.imageUrl = URL.createObjectURL(file.raw);
              this.teacher.avatar=res.data.url
            },
            beforeAvatarUpload(file) {
                    const isJPG = file.type === 'image/jpeg';
                    const isLt2M = file.size / 1024 / 1024 < 2;

                    if (!isJPG) {
                      this.$message.error('上传头像图片只能是 JPG 格式!');
                    }
                    if (!isLt2M) {
                      this.$message.error('上传头像图片大小不能超过 2MB!');
                    }
                    return isJPG && isLt2M;
                  }
                  


    }
  }
</script>

<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
  }
  .avatar {
    width: 100px;
    height: 100px;
    display: block;
    float: right;
  }
</style>
